<!--
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-08-01 21:23:32
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '上报详情',
  },
}
</route>
<template>
  <view class="bg-#F6F6F6 w-100% h-screen py-20rpx box-border">
    <view class="bg-#fff w-100%">
      <view class="w-100% p-30rpx flex justify-between items-center box-border wd-cell">
        <view class="text-#000 font-bold text-30rpx">上报状态</view>
        <view class="bg-#D3E3F4 text-#617DB0 py-10rpx font-bold px-30rpx text-30rpx">
          {{ statusList[baseData.status] }}
        </view>
      </view>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">标题:</view>
            <view class="inline-block text-#000 break-all">{{ baseData.title }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">内容:</view>
            <view class="inline-block text-#5a5b5d break-all">{{ baseData.content }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">材料:</view>
            <view class="inline-block text-#000 break-all w-100% py-20rpx">
              <view class="flex flex-col justify-center gap-30rpx w-100%">
                <view v-for="item in baseData.fileDOList" :key="item.id">
                  <video
                    v-if="item.type == 'video/mp4'"
                    class="h-400rpx w-100%"
                    :src="baseUrl + item.url"
                    autoplay
                    controls
                  ></video>
                  <wd-img
                    v-else
                    :width="100"
                    :height="100"
                    :src="baseUrl + item.url"
                    :enable-preview="true"
                  />
                </view>
              </view>
            </view>
          </view>
        </template>
      </wd-cell>
    </view>
    <view class="bg-#fff w-100% mt-20rpx">
      <view class="text-#000 font-bold text-30rpx w-100% p-30rpx wd-cell box-border">流程进度</view>
      <view class="p-30rpx box-border w-100%">
        <wd-steps :active="active" vertical dot>
          <wd-step>
            <template #title>
              <view class="flex justify-between">
                <view>提交</view>
                <view class="text-#000">
                  {{ formatTime(baseData.createTime, 'yyyy-MM-dd HH:mm:ss') }}
                </view>
              </view>
            </template>
            <template #description>
              <view class="text-#000 text-24rpx">
                <text class="mr-30rpx">提交人:</text>
                <text>{{ baseData.createName }}</text>
              </view>
            </template>
          </wd-step>
          <wd-step>
            <template #title>
              <view class="flex justify-between">
                <view>
                  转交给
                  <text class="ml-20rpx">{{ baseData.userName }}</text>
                </view>
                <view class="text-#000">
                  {{ baseData.transTime ? baseData.transTime.split(',')[1] : '' }}
                </view>
              </view>
            </template>
            <template #description>
              <view class="text-#000 text-24rpx">
                <text class="mr-30rpx">处理人:</text>
                <text>
                  {{ baseData.transTime ? baseData.transTime.split(',')[0] : '' }}
                </text>
              </view>
            </template>
          </wd-step>
          <wd-step>
            <template #title>
              <view class="flex justify-between">
                <view>已办结</view>
                <view class="text-#000">
                  {{ formatTime(baseData.updateTime, 'yyyy-MM-dd HH:mm:ss') }}
                </view>
              </view>
            </template>
            <template #description>
              <view class="text-#000 text-24rpx">
                <text class="mr-30rpx">处理人:</text>
                <text>{{ baseData.userName }}</text>
              </view>
              <view class="my-20rpx text-#000 text-24rpx">
                <text class="mr-30rpx">处理结果:</text>
                <text class="text-#000">{{ resultList[baseData.resultStatus] }}</text>
              </view>
              <view class="text-#000">
                <view class="mb-10rpx">内容:</view>
                <text>{{ baseData.result }}</text>
              </view>
            </template>
          </wd-step>
        </wd-steps>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getVillage } from '@/service/VillageCondition/index'
import { formatTime } from '@/utils/index'
const baseData = ref<any>({})
const active = ref(0)
const statusList = {
  1: '转派中',
  2: '处理中',
  3: '已办结',
}
const resultList = {
  1: '已处理',
  2: '延后处理',
  3: '不予处理',
}
const baseUrl = import.meta.env.VITE_SERVER_BASEURL
defineOptions({
  name: 'VillageCondition',
})
const value = ref<string>('')
// 测试 uni API 自动引入
onLoad(async ({ id }) => {
  const data = await getVillage(id)
  Object.assign(baseData.value, data.data)
  active.value = baseData.value.status - 1
})
</script>

<style>
::v-deep .wd-button {
  background: #029669 !important;
}
::v-deep .wd-search {
  padding: 0 !important;
}
::v-deep .wd-cell {
  border-bottom: 2rpx solid #eeeeee;
}
:deep(.wd-cell__left) {
  flex: auto !important;
  width: 100%;
  margin-right: 0 !important;
}
</style>
